/*
 * @Date: 2022-03-29 12:56:06
 * @LastEditors: fenglan
 * @LastEditTime: 2022-04-02 16:07:15
 * @FilePath: /payment-1/pay/src/pages/PayGround/PayGroundTable.jsx
 */
import React, { useState, useEffect } from 'react'
import Tab from '../../components/Tabs'
import { Row, Col, Form, Select, Button, DatePicker, ConfigProvider, Table, Input, Popover, Checkbox } from 'antd'
import { SearchOutlined, ProfileTwoTone } from '@ant-design/icons'
import zhCN from 'antd/es/locale/zh_CN'
import styles from './index.module.css'
const { Option } = Select
const { RangePicker } = DatePicker
export default function PayGroundTable() {
  const onSubmit = (fieldsValue) => {
    const rangeValue = fieldsValue['起止时间']
    const values = {
      ...fieldsValue,
      '起止时间': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
    }
    console.log('Received values of form: ', values);
  }
  // 表格数据
  const columns = [
    {
      title: '商户ID',
      dataIndex: 'user_id',
      key: 'user_id',
      sorter: (a, b) => a.user_id - b.user_id,
    },
    {
      title: '商户名称',
      dataIndex: 'user_name',
      key: 'user_name',

    },
    {
      title: '商户余额',
      dataIndex: 'use_leftmoneny',
      key: 'use_leftmoneny',

    },
    {
      title: '充值金额',
      dataIndex: 'recharge',
      key: 'phone',

    },
    {
      title: '充值手续费',
      dataIndex: 'balance',
      key: 'balance',

    },
    {
      title: '商户冻结余额',
      dataIndex: 'forse_charge',
      key: 'forse_charge',

    },
    {
      title: '代付笔数',
      dataIndex: 'agency_acount',
      key: 'agency_acount',

    },
    {
      title: '代付金额',
      dataIndex: 'agency_moneny',
      key: 'agency_moneny',

    },
    {
      title: '代付手续费',
      dataIndex: 'agency_balance',
      key: 'agency_balance',

    },
    {
      title: '代付总盈利',
      dataIndex: 'agency_make',
      key: 'agency_make',

    }
  ]
  const Data = [
    {
      key: '1',
      user_id: 1,
      user_name: 'www',
      use_leftmoneny: 200,
      recharge: 32,
      balance: 230,
      forse_charge: 2304,
      agency_acount: 699,
      agency_moneny: 69,
      agency_balance: 59,
      agency_make: 698
    },
    {
      key: '2',
      user_id: 2,
      user_name: 'www',
      use_leftmoneny: 200,
      recharge: 32,
      balance: 230,
      forse_charge: 2304,
      agency_acount: 699,
      agency_moneny: 69,
      agency_balance: 59,
      agency_make: 698
    },
    {
      key: '3',
      user_id: 3,
      user_name: 'www',
      use_leftmoneny: 200,
      recharge: 32,
      balance: 230,
      forse_charge: 2304,
      agency_acount: 699,
      agency_moneny: 69,
      agency_balance: 59,
      agency_make: 698
    },
    {
      key: '4',
      user_id: 4,
      user_name: 'www',
      use_leftmoneny: 200,
      recharge: 32,
      balance: 230,
      forse_charge: 2304,
      agency_acount: 699,
      agency_moneny: 69,
      agency_balance: 59,
      agency_make: 698
    },
    {
      key: '5',
      user_id: 5,
      user_name: 'www',
      use_leftmoneny: 200,
      recharge: 32,
      balance: 230,
      forse_charge: 2304,
      agency_acount: 699,
      agency_moneny: 69,
      agency_balance: 59,
      agency_make: 698
    },
    {
      key: '6',
      user_id: 6,
      user_name: 'www',
      use_leftmoneny: 200,
      recharge: 32,
      balance: 230,
      forse_charge: 2304,
      agency_acount: 699,
      agency_moneny: 69,
      agency_balance: 59,
      agency_make: 698
    },
  ]
  const [pagination] = useState({
    defaultCurrent: 1,
    total: 6,
    pageSize: 5,
    Num: 0,
    showQuickJumper: 'showQuickJumper',
    onChange: function onchange(page, ps) {
      console.log(page, ps);
    }
  })
  const onChange = (pagination, filters, sorter, extra) => {
    console.log(pagination, filters, sorter, extra);
  }
  const [checkedList, setCheckedList] = useState(['user_id', 'user_name', 'recharge', 'balance', 'forse_charge', 'agency_acount', 'agency_moneny', 'agency_balance', 'agency_make'])
  const checkBoxChange = (list) => {
    console.log(list);
    setCheckedList(list)
  }
  const content = (
    <Checkbox.Group style={{ width: '100%' }} onChange={checkBoxChange} defaultValue={['user_id', 'user_name', 'recharge', 'balance', 'forse_charge', 'agency_acount', 'agency_moneny', 'agency_balance', 'agency_make']}>
      <Row>
        <Col span={24}>
          <Checkbox value="user_id">商户ID</Checkbox>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Checkbox value="user_name" >商户名称</Checkbox>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Checkbox value="use_leftmoneny">商户余额</Checkbox>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Checkbox value="recharge">充值金额</Checkbox>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Checkbox value="balance">充值手续费</Checkbox>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Checkbox value="forse_charge">商户冻结余额</Checkbox>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Checkbox value="agency_acount">代付笔数</Checkbox>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Checkbox value="agency_moneny">代付金额</Checkbox>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Checkbox value="agency_balance">代付手续费</Checkbox>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Checkbox value="agency_make">代付总盈利</Checkbox>
        </Col>
      </Row>
    </Checkbox.Group>
  )

  const [selectColum, setSelectColum] = useState(columns)
  useEffect(() => {
    let newList = []
    for (let i = 0; i < checkedList.length; i++) {
      for (let j = 0; j < columns.length; j++) {
        if (checkedList[i] === columns[j].key) {
          newList.push(columns[j])
        }
      }
    }
    setSelectColum(newList)
  }, [checkedList])

  function ShowHeader() {
    return (
      <>
        <Row>
          <Col span={2} className={styles.tableheader}>商品总余额</Col>
          <Col span={3}>
            <Input placeholder="Username" disabled />
          </Col>
          <Col span={2} className={styles.tableheader}>总充值金额</Col>
          <Col span={3}>
            <Input placeholder="Username" disabled />
          </Col>
          <Col span={2} className={styles.tableheader}>充值手续费</Col>
          <Col span={3}>
            <Input placeholder="Username" disabled />
          </Col>
          <Col span={2} className={styles.tableheader}>代付冻结金额</Col>
          <Col span={3}>
            <Input placeholder="Username" disabled />
          </Col>
          <Col span={1} offset={1}>
            <Popover content={content} trigger="click" placement="bottom">
              <Button type='link'><ProfileTwoTone className={styles.icon} /></Button>
            </Popover>
          </Col>
        </Row>
        <Row>
          <Col span={2} className={styles.tableheader}>总代付笔数</Col>
          <Col span={3}>
            <Input placeholder="Username" disabled />
          </Col>
          <Col span={2} className={styles.tableheader}>总代付金额</Col>
          <Col span={3}>
            <Input placeholder="Username" disabled />
          </Col>
          <Col span={2} className={styles.tableheader}>代付手续费</Col>
          <Col span={3}>
            <Input placeholder="Username" disabled />
          </Col>
          <Col span={2} className={styles.tableheader}>代付总盈利</Col>
          <Col span={3}>
            <Input placeholder="Username" disabled />
          </Col>
        </Row>
      </>
    )
  }
  return (
    <ConfigProvider locale={zhCN}>
      <Row>
        <Col span={24}>
          <Tab title={'财务报表'} />
        </Col>
      </Row>
      <Row className={styles.requestSearch}>
        <Form layout="inline" onFinish={onSubmit}>
          <Col span={10}>
            <Form.Item name='user'>
              <Select placeholder="全部商户">
                <Option value="1">o1</Option>
                <Option value="2">o2</Option>
                <Option value="3">o3</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name='起止时间' >
              <RangePicker locale={zhCN} />
            </Form.Item>
          </Col>
          <Col span={2} >
            <Form.Item  >
              <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                搜索
              </Button>
            </Form.Item>
          </Col>
        </Form>
      </Row>
      <Row>
        <Col span={24}>
          <Table columns={selectColum} dataSource={Data} onChange={onChange} pagination={pagination} title={ShowHeader} />
        </Col>
      </Row>
    </ConfigProvider>
  )
}
